import { Cascader, DatePicker, Form, Input, Modal, Select } from 'antd';
import React, { Component } from 'react';
import { connect } from 'umi';
import cityOption from '@/pages/userManage/city';
import _ from 'lodash';
import moment from 'moment';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 15 },
  },
};

class Alarm extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.formRef = React.createRef();
  }

  componentDidUpdate() {
    const { alarmDetail = {} } = this.props;
    !alarmDetail.id && this.formRef.current && this.formRef.current.resetFields();
    alarmDetail &&
      this.formRef.current &&
      this.formRef.current.setFieldsValue(this.props.alarmDetail || {});
  }

  //关闭modal窗
  handleCancel() {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/changeModelVisibleAndCloseModel',
      });
  }

  handleSumbit(optiontype) {
    // 用户信息
    const { dispatch, alarmDetail } = this.props;
    let formValues = this.formRef.current.getFieldsValue();
    console.log(formValues)
    //alarmDetail非空，即为修改表单时
    if (!_.isEmpty(alarmDetail)) {
      //这样写的目的是，FormValue会覆盖alarmDetail中的共同数据，保留没有的数据
      formValues = {
        ...alarmDetail,
        ...formValues,
      };
    }
    //调用父组件的提交方法，
    this.props.handleSumbit(optiontype, formValues);
  }

  render() {
    const { visible, optiontype } = this.props;
    const formColumns = [
      // {
      //   title: '桩号',
      //   name: 'stakemark',
      //   rules: [
      //     {
      //       required: true,
      //     },
      //   ],
      // },
      {
        title: '油类污染物',
        name: 'oil',
        rules: [
          {
            required: false,
          },
        ],
      },
      {
        title: '铅',
        name: 'pb',
        rules: [
          {
            required: false,
          },
        ],
      },
      {
        title: '铬',
        name: 'cr',
        rules: [
          {
            required: false,
          },
        ],
      },
      {
        title: '镉',
        name: 'cd',
        rules: [
          {
            required: false,
          },
        ],
      },
      {
        title: '汞',
        name: 'hg',
        rules: [
          {
            required: false,
          },
        ],
      },
      {
        title: '铁',
        name: 'fe',
        rules: [
          {
            required: false,
          },
        ],
      },
      {
        title: '锰',
        name: 'mn',
        rules: [
          {
            required: false,
          },
        ],
      },
      {
        title: '硫',
        name: 's',
        rules: [
          {
            required: false,
          },
        ],
      },
    ];

    return (
      <Modal
        open={visible}
        title={optiontype == 'add' ? '新增预警' : '修改预警'}
        onCancel={() => {
          this.handleCancel();
          // this.formRef.current.resetFields();
        }}
        onOk={() => {
          this.formRef.current &&
            this.formRef.current
              .validateFields()
              .then((values) => {
                this.handleSumbit(optiontype);
              })
              .catch((errorInfo) => {
                // alert("验证未通过")
              });
        }}
      >
        <Form {...formItemLayout} ref={this.formRef}>
          <Form.Item
            label='桩号'
            // name='stakemark'
            // rules={[{
            //   required: true,
            //   message: '桩号不能为空'
            // }]}
            style={{
              marginBottom: 0,
            }}
          >
            <Form.Item
              name='stakemark0'
              rules={[{
                required: true,
                message: '桩号不能为空'
              }]}
              style={{ display: 'inline-block', width: '48%' }}
            >
              <Input placeholder='请输入桩号' />
            </Form.Item>+
            <Form.Item
              name='stakemark1'
              rules={[{
                required: true,
                message: '桩号不能为空'
              }]}
              style={{ display: 'inline-block', width: '48%' }}
            >
              <Input placeholder='请输入桩号' />
            </Form.Item>
          </Form.Item>
          {formColumns.map((item, index) => {
            switch (item.type) {
              case 'cascader': {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <Cascader options={item.Option}></Cascader>
                  </Form.Item>
                );
              }
              case 'select': {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <Select>
                      {item.Option.map((role, index) => {
                        return (
                          <Select.Option key={index} value={role.value}>
                            {role.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                );
              }
              case 'treeSelect': {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    {item.Option.length && (
                      <Select allowClear>
                        {item.Option.map((leaf, index) => {
                          return (
                            <Select.OptGroup label={leaf.title} key={item.name + index}>
                              {leaf.children.map((l, num) => {
                                let value =
                                  l.value !== undefined
                                    ? l.value
                                    : l.key !== undefined
                                      ? String(l.key)
                                      : l.title;
                                return (
                                  <Select.Option
                                    value={value}
                                    title={l.title}
                                    key={`${l.title}.${num}`}
                                  >
                                    {l.title}
                                  </Select.Option>
                                );
                              })}
                            </Select.OptGroup>
                          );
                        })}
                      </Select>
                    )}
                  </Form.Item>
                );
              }
              case 'date': {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <DatePicker
                      showTime
                      style={{ width: '100%' }}
                      placeholder={`请输入${item.title}`}
                    />
                  </Form.Item>
                );
              }

              default: {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <Input placeholder='单位:（mg/L）' />
                  </Form.Item>
                );
              }
            }
          })}
        </Form>
      </Modal>
    );
  }
}

export default connect(
  ({ }) => ({}),
  (dispatch) => {
    return { dispatch };
  },
  null,
  { forwardRef: true },
)(Alarm);
